<template>
  <div class="h-full flex flex-col">
    <a-card class="min-h-[68px] rounded my-[10px]" :body-style="{ padding: '0px 10px', height: '100%' }"
      :bordered="false">
      <template #extra>
        <a-button class="border-none" icon="rollback" @click="rollback">{{ $t("app.setting.themecolor.rr99") }}
        </a-button>
      </template>
      <iframe id="preview-iframe" src="" width="100%" height="100%"></iframe>
    </a-card>
  </div>
</template>
  
<script>
import axios from 'axios'
import jwt from 'jwt-simple'
import storage from "store";
import { ACCESS_TOKEN } from "@/store/mutation-types";

export default {
  data() {
    return {
    }
  },
  mounted() {
    const reportName = sessionStorage.getItem('report');
    // console.log('reportName',reportName);
    axios.get(process.env.VUE_APP_BASE_API + '/' + reportName, {
      responseType: 'arraybuffer',
      headers: {
        token: storage.get(ACCESS_TOKEN),
        tokens: storage.get("bmwToken") || "",
        YtAuth: jwt.encode({ bmw: 1 }, 'jwt'),
      },
    })
      .then((response) => {
        // console.log('response', response);
        const iframe = document.getElementById('preview-iframe');

        // iframe.src = URL.createObjectURL(response.data, { type: 'application/pdf' });

        const blob = new Blob([response.data], { type: 'application/pdf' });
        iframe.src = URL.createObjectURL(blob);

      })
      .catch((error) => {
        console.error('Error fetching file:', error);
      });
  },
  methods: {
    rollback() {
      this.$router.push('/dcoPortal')
    },
  },
}

</script>
  
<style lang="less" scoped>
.ant-card {
  height: 100% !important;
}
</style>